<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">系统事件监控</h3>
				<div class="box-tools pull-right">
					<@shiro.hasPermission name="system:monitor:event:delete">
						<a class="btn btn-sm btn-primary"  id="eventDelete" >删除</a>
					</@shiro.hasPermission>
				</div>
			</div>
			<div class="box-body">
				<div class="clearfix">
					<form id="event-search-form" class="" >
						<div class="col-md-4">
							<div class="input-group date ">
								<div class="input-group-addon">
									<i class="fa fa-calendar"></i>
								</div>
								<input type="text"  class="form-control pull-right" name="beginCreatedTime" placeholder="选择开始时间...">
							</div>
						</div>
						<div class="col-md-4">
							<div class="input-group date ">
								<div class="input-group-addon">
									<i class="fa fa-calendar"></i>
								</div>
								<input type="text" class="form-control pull-right" name="endCreatedTime" placeholder="选择结束时间...">
							</div>
						</div>
						<div class="col-md-4">
							<div class="input-group">
								<span class="input-group-addon"><i class="fa fa-search"></i></span>
								<input type="text" class="form-control" name="description" placeholder="根据事件详情搜索...">
							</div>
						</div>
						<div class="col-md-4">
							<button type="button" onclick="eventReload();" class="btn btn-primary">搜索</button>
						</div>
					</form>
				</div>
				<div class="clearfix" style="padding-top: 15px;">
					<table id="event_table" class="table table-bordered table-striped">
						<thead>
							<tr role="row">
								<th><input type="checkbox" value="" title="全选" id="checkbox" /></th>
								<th>序号</th>
								<th>事件编号</th>
								<th>事件路径</th>
								<th>事件详情</th>
								<th>事件开始时间</th>
								<th>事件结束时间</th> 
								<th>操作</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
var event_table;
$(function() {
	var eventSearchForm = $("#event-search-form");
	
	$.datetimepicker.setLocale('ch');
	//初始化时间选择器
	$('[name=beginCreatedTime]').datetimepicker({
		format:"Y/m/d 00:00:00",      //格式化日期
		timepicker:true,    //开启时间选项
		yearStart:2000,     //设置最小年份
		yearEnd:2050,        //设置最大年份
		todayButton:false    //关闭选择今天按钮
	});
	
	//初始化时间选择器
	$('[name=endCreatedTime]').datetimepicker({
		format:"Y/m/d 23:59:59",      //格式化日期
		timepicker:true,    //开启时间选项
		yearStart:2000,     //设置最小年份
		yearEnd:2050,        //设置最大年份
		todayButton:false    //关闭选择今天按钮
	});
	
	//初始化表格
	var No=0;
	event_table = $('#event_table').DataTable({
		"dom":'itflp',
		"processing":true,  // 是否显示取数据时的那个等待提示
		"searching":false,
		"serverSide":true, // //指明是通过服务端来取数据
		"bInfo":false,
		"language":{"url":"plugins/datatables/language.json"},
		"sAjaxSource":"${request.contextPath}/system/monitor/event/grid",   //请求的地址
		"fnServerData": retrieveData,        // 获取数据的处理函数
		"columns":[ 
			{"data":"id"}, 
		    {"data":null}, 
			{"data":"code",'sClass': "text-center"},
			{"data":"requestUrl"},
			{"data":"description"},
			{"data":"startTime"},
			{"data":"endTime"},
			{"data":null} 
			],
		"columnDefs" :[{
			    targets: 0,
			    bSortable: false,
			    data: null,
			    render: function (data) {
			        return '<input type="checkbox" name="checkbox" value="' + data + '" title="' + data + '" id="checkbox_'+data+'" class="checkbox-row"/>';
			    }
			},{
			    targets: 1,
			    bSortable: false,
			    data: null,
			    render: function (data) {
			    	No=No+1;
			        return No;
			    }
			},{
			    targets: 5,
			    data: null,
			    render: function (data) {
			        return new Date(data).format("yyyy-MM-dd hh:mm:ss");
			    }
			},{
			    targets: 6,
			    data: null,
			    render: function (data) {
			        return new Date(data).format("yyyy-MM-dd hh:mm:ss");
			    }
			},{
				"targets" : -1,
				"data" : null,
				"render" : function(data) {
					var btn = '<a class="btn btn-xs btn-primary" target="modal" modal="lg" href="${request.contextPath}/system/monitor/event/view?id='+ data.id+ '">查看</a> &nbsp;';
						if(data.roleValue != 'super'){
							btn = btn+'<@shiro.hasPermission name="system:monitor:event:delete">'
							+'<a class="btn btn-xs btn-default" callback="eventReload();" data-body="确认要删除吗？" target="ajaxTodo" method="DELETE" href="${request.contextPath}/system/monitor/event/delete?ids='+ data.id + '">删除</a>&nbsp;'
							+'</@shiro.hasPermission>';
						}
					return btn;
				},
		    	bSortable: false
		    }]
	}).on('preXhr.dt', function ( e, settings, data ) {
		console.log(data,settings)
		No=0;
    } );
	
	
	$("#checkbox").on('click', function (e) {
		var isChecked = $(this).prop("checked");
	    $("input[name='checkbox']").prop("checked", isChecked);
	});
	
	$("#eventDelete").on('click', function (e) {
		var idArr =[]; 
		$("input[type='checkbox'][name='checkbox']:checked").each(function(){ 
			idArr.push($(this).val()); 
		});
		$.ajax({
	      type: "delete",
	      url: "${request.contextPath}/system/monitor/event/delete?ids="+idArr.join(','),
	      dataType: "json",
	      success: function(data){
	    	  $("#checkbox").prop("checked",false);
	    	  eventReload();
	      }
	  });
	});
	
	
	
});

/**
 * 刷新列表
 */
function eventReload(){
	event_table.ajax.reload();
}


/**
 * action 		请求地址对应sAjaxSource
 * sortPageData 排序分页参数数据
 * fnCallback	DataTable回调函数
 */
function retrieveData(action,sortPageData, fnCallback) {
	var eventSearchForm = $("#event-search-form");
	var formData = eventSearchForm.serializeObject();
    $.ajax({    
        url : action,                              //这个就是  
        data : getAjaxSearchData(sortPageData,formData),   			//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数 ,分页,排序,查询等的值   
        type : 'get',
        dataType : 'json',    
        async : false,
        success : function(result) { 
            fnCallback(result);                     //把返回的数据传给这个方法就可以了,datatable会自动绑定数据的    
        }   
    });    
}
</script>